<template>
	<view>
		<view class="no-has" v-if="classMomentList.length === 0">
			暂无课堂瞬间！
		</view>
		<view class="has" v-else >
			<view class="has-container" v-for="(item,index) in classMomentList" :key="index">
				<view class="hc-top">
					<view class="hc-course">
						艺术{{item.courseName}}
					</view>
					<view class="hc-teacher">
						老师{{item.teacherName}}
					</view>
				</view>
				
				<view class="hc-img" v-for="(img,indextwo) in item.images" :key="indextwo">
					<view class="img-video" v-if="img.type == 0">
						<!-- <img :src="img.url" alt="" style="width: 100%;height: 100%;"/> -->
						<img src="@/static/img.jpg" alt="" style="width: 100%;height: 100%;"/>
					</view>
					<view class="img-video">
						<uni-video :src="img.url" style="width: 100%;height: 100%;"></uni-video>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import {
	getClassroomMoment
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				classMomentList:[]
			}
		},
		onLoad() {
			this.getClassroomMoment()
		},
		methods: {
			async getClassroomMoment(){
				uni.showLoading()
				const data = {
					pageSize:999,
					pageNum:1,
				}
				const res = await getClassroomMoment(data)
				if(res.code == 200){
					uni.hideLoading()
					this.classMomentList = res.rows
				}
			    
			},
		}
	}
</script>

<style>
.no-has{
	text-align: center;
	margin-top: 50rpx;
	color: #7d7a7a;
}
.has-container{
	width: 95%;
	margin: 20rpx auto;
	background-color: #fff;
	padding: 20rpx;
}
.hc-top{
	display: flex;
	justify-content: space-between;
}
.hc-course{
	font-size: 34rpx;
	font-weight: bold;
}
.hc-teacher{
	color: #7d7a7a;
}
.img-video{
	width: 100%;
	margin-top: 20rpx;
}
</style>
